@extends('layouts.back_stage')
@section('content')
  <style>
  /* .container{margin-top:30px} */
  #app{padding:20px}
  [v-cloak] {display: none;}
  .table_margin{padding:20px;background:#fff;margin-top:10px}
  .ingred_sel{width:300px;margin:0 30px 0 10px}
  ::-webkit-scrollbar {height: 8px;}
  </style>
  <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">包码绑定</h3></div>
        <audio id="music_success" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/success.mp3" type="audio/mp3"></audio>
        <audio id="music_faile" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/faile.mp3" type="audio/mp3"></audio>
        <div class="page-body" id="app" v-cloak> 
           <div class="table_margin"  >
             <label>扫描条码：</label>
                <el-input  ref="input"  class="ingred_sel" v-model="amount_odd" @keyup.enter.native="query" size="small"  placeholder="请输入扫描码" clearable></el-input>
                <el-button type="primary" class="font_text" @click="seek" size="small" >搜索</el-button>
                <el-button  class="font_text" type="primary" @click="reset" size="small" >重置</el-button>
               
           </div>
           <div class="table_margin"  >
              <template>
                <el-table
                  :data="tableData1"
                  border  
                  size="mini"
                  style="width: 100%;text-align:center">
                  <el-table-column
                    prop="type"
                    label="类型"
                    :resizable='false'
                    align="center"
                    width="230">
                  </el-table-column>
                  <el-table-column
                    prop="packet_code"
                    align="center"
                    :resizable='false'
                    label="包码条码"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    label="规格"
                    :resizable='false'
                    align="center"
                    width="230">
                  </el-table-column>
                  <el-table-column
                    prop="exists"
                    label="已关联"
                    :resizable='false'
                    align="center"
                    width="230">
                  </el-table-column>
                  <el-table-column
                    prop="gg"
                    label="操作"
                    :resizable='false'
                    align="center"
                    width="110">
                    <template slot-scope="scope">
                       
                        <el-button type="text" @click='empty(scope)' size="small">清空整包</el-button>
                      </template>
                  </el-table-column>
                </el-table>
              </template>
           </div>
           <div class="table_margin"  >
              <template>
                <el-table
                  :data="tableData2"
                  border  
                  size="mini"
                  :resizable='false'
                  style="width: 100%;text-align:center">
                  <el-table-column
                    prop="index"
                    type="index"
                    label="序号"
                    :resizable='false'
                    align="center"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="girard"
                    align="center"
                    :resizable='false'
                    label="款号"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="color"
                    align="center"
                    label="颜色"
                    :resizable='false'
                    width="120"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="size"
                    label="尺码"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="code"
                    label="商品条码"
                    :resizable='false'
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="loged_at"
                    label="扫描时间"
                    :resizable='false'
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="loged_by"
                    label="扫描人"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="gg"
                    label="操作"
                    :resizable='false'
                    align="center"
                    width="110">
                    <template slot-scope="scope">
                       
                        <el-button type="text" @click.native.prevent="deleteRow(scope, tableData2)" size="small">删除</el-button>
                      </template>
                  </el-table-column>
                </el-table>
              </template>
           </div>

           
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() {    
          return {
            amount_odd:'',
            tableData1: [],
            tableData2: [],
           
           
          }
        },
        mounted() {
            this.$refs['input'].focus()
            // this.$refs['input'].value = ''
          },
      methods: {
        //点击回车键
        query(){
          let that=this
          if(this.amount_odd==''){
                    this.$notify.error({
                        title: '提示',
                        message: '请输入查询的包码',
                    });
                    return false;
                }

               if(this.amount_odd.startsWith('B')){
                  if(that.tableData1==''){
                       this.showTab1();
                       that.amount_odd=''
                       this.$refs['input'].focus()
                  }else{
                    this.$confirm('你确定要替换此包吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        that.tableData1.pop();
                        this.showTab1();
                        that.amount_odd=''
                        this.$refs['input'].focus()
                        this.$message({
                          type: 'success',
                          message: '替换成功!'
                        });
                      }).catch(() => {
                        this.$message({
                          type: 'info',
                          message: '已取消替换'
                        });          
                      });
                  }
                   
                }else if(this.amount_odd.startsWith('S')){
                  // console.log(that.tableData1)
                  for(var e in that.tableData1){
                    var numLength=that.tableData1[e].num.split('件')[0]
                  }
                  if(that.tableData1==''){
                    this.$notify.error({
                        title: '提示',
                        message: '请先输入包码',
                     });
                     return false;
                   }
                  for(var e in that.tableData2){
                    var  tabLength=that.tableData2.length
                    tabLength
                    //console.log(that.tableData2[e].code)
                    if(this.amount_odd==that.tableData2[e].code){
                            this.$notify.error({
                              title: '提示',
                              message: ' 此商品码在此包存在',
                          });
                          return false;
                    }
                  }
                 
                  if(tabLength==numLength){
                    this.$notify.error({
                          title: '提示',
                          message: ' 此包数量已满；请扫描下一个包码',
                      });
                          return false;
                  }

                  this.addcode();
                  that.amount_odd=''
                  this.$refs['input'].focus()
                }  
        },
          //重置
          reset(){
            let that=this
              this.amount_odd='';
             // that.seek()
            this.tableData1=[];
            this.tableData2=[];
            },
          //搜索
          seek(){
            let that=this
          if(this.amount_odd==''){
                    this.$notify.error({
                        title: '提示',
                        message: '请输入查询的包码',
                    });
                    return false;
              }

               if(this.amount_odd.startsWith('B')){
                  if(that.tableData1==''){
                       this.showTab1();
                       that.amount_odd=''
                       this.$refs['input'].focus()
                  }else{
                    this.$confirm('你确定要替换此包吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        that.tableData1.pop();
                        this.showTab1();
                        that.amount_odd=''
                        this.$refs['input'].focus()
                        this.$message({
                          type: 'success',
                          message: '替换成功!'
                        });
                      }).catch(() => {
                        this.$message({
                          type: 'info',
                          message: '已取消替换'
                        });          
                      });
                  }
                   
                }else if(this.amount_odd.startsWith('S')){
                  // console.log(that.tableData1)
                  for(var e in that.tableData1){
                     //console.log(222,that.tableData1[e])

                    var numLength=that.tableData1[e].num.split('件')[0]
                  }
                  if(that.tableData1==''){
                    this.$notify.error({
                        title: '提示',
                        message: '请先输入包码',
                     });
                     return false;
                   }
                  for(var e in that.tableData2){
                    var  tabLength=that.tableData2.length
                    tabLength
                    //console.log(that.tableData2[e].code)
                    if(this.amount_odd==that.tableData2[e].code){
                            this.$notify.error({
                              title: '提示',
                              message: ' 此商品码在此包存在',
                          });
                          return false;
                    }
                  }
                 
                  if(tabLength==numLength){
                    this.$notify.error({
                          title: '提示',
                          message: ' 此包数量已满；请扫描下一个包码',
                      });
                          return false;
                  }

                  this.addcode();
                  that.amount_odd=''
                  this.$refs['input'].focus()
                }  
           },
      //查询
           showTab1(){
             let that=this
              $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'get',
                    url:`/packs/search/?code=${this.amount_odd}`,
                    success:function(res){
                      console.log(1111,res)
                    if(res.result.success==true){
                       this.tableData1=[];
                       this.tableData2=[];
                          if(res.content.exists===0){
                            let pack={
                              type:res.content.girard,
                              packet_code: res.content.packet_code,
                              num: `${res.content.num}件/包`,
                              exists: `0件`
                            };
                            that.tableData1.push(pack);
                          }else{
                            let pack={
                              type:res.content.girard,
                              packet_code:res.content.packet_code,
                              num: `${res.content.num}件/包`,
                              exists: `${res.content.exists}件`
                            };
                            that.tableData1.push(pack);
                          }
                          that.tableData2=[];
                            for(var e in res.content.goods){
                                let list={
                                  girard:res.content.girard,
                                  color:res.content.color,
                                  size:res.content.goods[e].size,
                                  code:res.content.goods[e].code,
                                  loged_at:res.content.goods[e].loged_at,
                                  loged_by:res.content.goods[e].loged_by.split(',')[1]
                                }
                                  that.tableData2.push(list);
                            }
                    }else{
                     // that.$message.error('你输入的包码有误，请核对');
                       that.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                    }

                        }
                      
                  })
           },
          //新增
          addcode(){
            let that=this
           // that.tableData1=[];
           // that.tableData2=[];
            $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type:'get',
                url:`/packs/search/?code=${this.amount_odd}`,
                success:function(res){
                  if(res.result.success==true){
                // console.log(2222,res.result.success==false)
                     if(res.result.success==true){
                      that.tableData1=[];
                        that.tableData2=[];
                        let pack={
                             type:res.content.info.girard,
                              packet_code:res.content.info.packet_code,
                              num: `${res.content.info.num}件/包`,
                              exists: `${res.content.info.exists}件`
                            };
                            that.tableData1.push(pack);
                             for(var e in res.content.info.goods){
                                // console.log(res.content.info.goods[e])
                                 let list={
                                    girard:res.content.info.girard,
                                    color:res.content.info.color,
                                    size:res.content.info.goods[e].size,
                                    code:res.content.info.goods[e].code,
                                    loged_at:res.content.info.goods[e].loged_at,
                                    loged_by:res.content.info.goods[e].loged_by.split(',')[1]
                                  };
                                  that.tableData2.push(list); 
                                  var music = document.getElementById("music_success");
                                  music.play()
                             }
                             
                     
                     }else{
                     //  alert(1122)
                      var musica = document.getElementById("music_faile");
                          musica.play()
                           that.$message({
                              type: 'info',
                              message: `${res.result.errorMsg}`
                            });  
                            return false;      
                     }
                }else{
                 // alert('aaa')
                 var musica = document.getElementById("music_faile");
                          musica.play()
                  that.$notify({
                            title: '提示',
                            message:res.result.errorMsg
                        });
                }
                }

              })
          },

           //点击删除
           deleteRow(scope,tableData2){
             
            let that=this
            let packet_code=''
           
              this.$confirm('此操作将永久删除该商品吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                for(var e in that.tableData1){
                          packet_code=that.tableData1[e].packet_code
                        }
                        
                            $.ajax({
                              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                                  type:'delete',
                                  url:'/packs/delete',
                                  dataType:'json',
                                  data:{
                                    packetcode:packet_code,
                                    code:scope.row.code 
                                  },
                                  success:function(res){  
                                    that.tableData2=[]
                                    if(res.result.success==true){
                                       for(var e in res.content.goods){
                                        res.content.goods[e].color=scope.row.color
                                        res.content.goods[e].girard=scope.row.girard
                                        res.content.goods[e].loged_by=res.content.goods[e].loged_by.split(',')[1]
                                        that.tableData2.push(res.content.goods[e])
                                      }

                                      for(var k in that.tableData1){
                                           var puder=[{
                                            type:that.tableData1[k].type,
                                            packet_code:that.tableData1[k].packet_code,
                                            num:that.tableData1[k].num,
                                            exists:`${that.tableData2.length}件`
                                            }]
                                           
                                          that.tableData1=puder
                                       }
                                       that.$message({
                                          type: 'success',
                                          message: '删除成功!'
                                        });
                                    }else{
                                      that.$notify.error({
                                            title: '提示',
                                            message: res.result.errorMsg,
                                        });
                                    }
                                     
                                  }
                              })

              
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
     
           
           },
          //整包清空
          empty(scope){
            let code=''
            let that=this
              for(var e in this.tableData1){
                code=this.tableData1[e].packet_code  
               }
              
           this.$confirm('你确定要清空此包吗？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                      type:'post',
                      url:'/packs/reset',
                      dataType:'json',
                      data:{
                        
                        code:code
                      },
                      success:function(res){  
                        that.tableData2=[]
                        for(var k in that.tableData1){
                              var puder=[{
                              type:'',
                              packet_code:that.tableData1[k].packet_code,
                              num:that.tableData1[k].num,
                              exists:`${that.tableData2.length}件`
                              }]
                            that.tableData1=puder
                          }

                      }
                  })
                this.$message({
                  type: 'success',
                  message: '清空成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消清空'
                });          
              });
           }   
         },
    
       created(){
       
        }
      })
  </script>
@endsection